<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="1" leftUrl="/pages/my/groupList" :noLeft="false" :showTitle="title"
			showBackground="#EAECEF">
		</myheader>
		<!-- #endif -->
		<view class="content">
			<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组服务说明:</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
					适宜于家庭备餐、朋友聚餐时，按所有人已订阅的健康膳食方案，提供推荐适宜饮食推荐的服务模式。
				</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
					并可根据群成员健康体态档案情况，提供精准适宜饮食推荐服务。
				</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
					你可为家庭、或朋友创建专属群组。 也可加入其他人所创建的群组。
				</view>
			</view>
			<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;" v-if="isAdmin==1">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组名称,必填</view>
				<view style="margin-top: 10px;">
					<uni-easyinput v-model="groupInfo.name" placeholder="请输入群名称" style="height: 59px;"></uni-easyinput>
				</view>
				<view style="margin-top: 10px;font-size: 14px;color: #8292A2;font-size: 350;">长度限15个字</view>
			</view>
			<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;" v-if="isAdmin==1">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">入群邀请有效期,必填</view>
				<view style="margin-top: 10px;">
					<view v-for="(item,index) in timeOptionList" :key="index"
						:class="(groupInfo.effectiveTime==item.num&&groupInfo.timeType==item.timeType)?'timeCardSelect':'timeCard'"
						@click="setTime(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="createbox" style="display: flex;justify-content: center;align-items: center;" @click="save()"
				v-if="isAdmin==1">
				<view style="text-align: center;">
					<view style="font-size: 20px;font-weight: 700;">更新群组</view>
				</view>
			</view>
			<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组成员</view>
				<view v-for="(member, index) in memberList" :key="index" :class="{ 'border-bottom' : index!== memberList.elngth - 1 }"
					style="margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: inline-flex;">
						<image :src="member.photo"
							style="display: inline-block;width: 48px;height: 48px;border-radius: 10px;background-color: #EAECEF;">
						</image>
						<view
							style="margin-left: 10px;width: 140px;height: 48px;font-size: 16px;font-weight: 350;color:#34495E;display: inline-flex;flex-direction:column;">
							<view v-if="member.remark"
								style="font-size: 16px;font-weight: 500;color:#34495E;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
								{{member.remark }}
							</view>
							<view
								style="font-size: 14px;color:#7F8C8D;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
								{{member.userName}}
							</view>
						</view>
					</view>
					<view
						style="display: inline-flex;flex-grow: 1;align-items: center;height: 48px;justify-content: flex-end;"
						v-if="isAdmin==1">
						<view @tap="editRemark(member)"
							style="display: inline-block;font-size:16px;font-weight:400;margin-right: 15px;color:#1ABC9C">
							修改备注</view>
						<view style="display: inline-block;font-size: 16px;font-weight: 400;color:red"
							@click="deleteMember(member)">删除</view>
							<!-- v-if="member.userId !== uid" -->
					</view>
				</view>
			</view>
			<view style="height: 150px;"></view>
		</view>
		<uni-popup ref="popup" type="center" background-color="white" @change="popupChange">
			<view class="input">
				<view class="input-msg">
					<input style="height: 100%" type="text" placeholder="请在这里输入用户名…" v-model="msg" />
				</view>
				<view class="input-btn" @tap="submit">提交</view>
			</view>
		</uni-popup>
		<view class="sub-btn" @tap="deleteGroup">删除群组</view>
	</view>
</template>

<script>
	import {
	mapGetters
} from "vuex";
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				groupInfo: {
					"id": null,
					"name": null,
					"effectiveTime": null,
					"timeType": null,
					"des": null,
					"createUser": null,
				},
				memberList: [],
				isAdmin: 0,
				editObj: {},
				msg: '',
				title: "群组信息",
				timeOptionList: [{
						"name": "30分钟",
						"num": 30,
						"timeType": 0 //分钟
					},
					{
						"name": "3个小时",
						"num": 3,
						"timeType": 1 //小时
					},
					{
						"name": "1天",
						"num": 1,
						"timeType": 2 //天
					},
					{
						"name": "3天",
						"num": 3,
						"timeType": 2 //天
					},
					{
						"name": "10天",
						"num": 10,
						"timeType": 2 //天
					},
					{
						"name": "30天",
						"num": 30,
						"timeType": 2 //天
					},
					{
						"name": "永久",
						"num": 9999,
						"timeType": 3 //天
					}
				]
			}
		},
		computed: {
			...mapGetters(["uid"])
		},
		onLoad(e) {
			if (e.groupId != null) {
				this.groupInfo.id = e.groupId;
			} else {
				uni.navigateBack();
			}
			this.getDetail();
			this.getMemberList();
		},
		methods: {
			submit() {
				if (!this.msg) {
					return uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
				}
				this.$H.put("portal/group/editUserByGroup", {
					id: this.editObj.id,
					remark: this.msg
				}).then((res) => {
					uni.hideLoading();
					if(res.code==0){
						uni.showToast({
							title: "更新成功",
							icon: "none"
						});
						this.getMemberList();
						this.$refs.popup.close()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			popupChange() {
				this.msg = ''
			},
			editRemark(member) {
				this.editObj = Object.assign(member)
				this.$refs.popup.open()
			},
			deleteGroup() {
				let that = this
								uni.showModal({
									content: '确定要删除该群组吗',
									confirmColor: "#E02828",
									success: function (res) {
										if (res.confirm) {
											uni.showLoading({
												title: '删除中',
												mask: true
											})
											that.trueDel()
										} else if (res.cancel) {
											return false;
										}
									},
								});
			},
			trueDel() {
				this.$H.delete("portal/group/delGroup?groupId=" + this.groupInfo.id).then((res) => {
					uni.hideLoading();
					if(res.code==0){
						uni.showToast({
							title: "删除成功",
							icon: "none"
						});
						uni.navigateBack()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			deleteMember(member) {
				if (member.administrators == 1) {
					uni.showToast({
						title: "您是管理员无法删除您自己",
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: '正在删除中...',
					mask: true
				});
				this.$H.delete("portal/group/delGroupUserId?groupId=" + member.groupId + "&userId=" + member.userId).then((res) => {
					uni.hideLoading();
					if(res.code==0){
						uni.showToast({
							title: "删除成功",
							icon: "none"
						});
						this.getMemberList();
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			getMemberList() {
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				});
				this.$H.get("portal/group/searchUsersByGroup", {
					groupId: this.groupInfo.id
				}).then((res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.memberList = res.data;
					}
				}));
			},
			getDetail() {
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				});
				this.$H.get("portal/group/searchGroupById", {
					groupId: this.groupInfo.id
				}).then((res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.isAdmin = res.data.isAdmin;
						if (this.isAdmin == 1) {
							this.title = "管理群组"
							this.groupInfo.name = res.data.name;
							this.groupInfo.effectiveTime = res.data.effectiveTime;
							this.groupInfo.timeType = res.data.timeType;
							this.groupInfo.createUser = res.data.createUser;
						}
					}
				}));
			},
			setTime(item) {
				if (this.isAdmin == 1) {
					this.groupInfo.effectiveTime = item.num;
					this.groupInfo.timeType = item.timeType;
					this.$forceUpdate();
				}
			},
			save() {
				if (this.isAdmin != 1) {
					uni.showToast({
						title: "您不是管理员",
						icon: "none"
					});
					return;
				}
				if (this.groupInfo.name == null || this.groupInfo.name.trim() == "" || this.groupInfo.name.length > 15) {
					uni.showToast({
						title: "请正确输入组名",
						icon: "none"
					});
					return;
				}
				if (this.groupInfo.effectiveTime == null || this.groupInfo.timeType == null) {
					uni.showToast({
						title: "请选择入群邀请有效期",
						icon: "none"
					});
					return;
				}
				if (this.groupInfo.des != null && this.groupInfo.des.length > 100) {
					uni.showToast({
						title: "群描述不能超过100个字",
						icon: "none"
					});
					return;
				}
				let data = {
					"id": this.groupInfo.id,
					"name": this.groupInfo.name,
					"effectiveTime": this.groupInfo.effectiveTime,
					"timeType": this.groupInfo.timeType,
					"des": this.groupInfo.des,
				}
				uni.showLoading({
					title: '正在保存中...',
					mask: true
				});
				this.$H.put("portal/group/editGroup", data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: "更新成功",
							icon: "none"
						})
						this.getDetail();
						this.getMemberList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.input {
	width: 670rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column; 
	background: #fff;
	border-radius: 20rpx;
	&-msg {
		width: 100%;
		height: 400rpx;
		font-size: 26rpx;
		color: #34495e;
		padding: 20rpx;
	}
	&-btn {
		width: 80%;
		margin-left: 10%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #1ABC9C;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 20rpx;
	}
}
	.content {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.timeCard {
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		padding: 10px 20px 10px 20px;
		border-radius: 10px;
		background-color: white;
		border: 1px solid #EAECEF;
		color: #1ABC9C;
		margin-right: 5px;
		margin-top: 5px;
	}

	.timeCardSelect {
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		padding: 10px 20px 10px 20px;
		border-radius: 10px;
		background-color: #1ABC9C;
		border: 1px solid #EAECEF;
		color: white;
		margin-right: 5px;
		margin-top: 5px;
	}

	.createbox {
		margin-top: 15px;
		height: 60px;
		border-radius: 10px;
		background-color: #1ABC9C;
		color: white;
		font-size: 16px;
		font-weight: 700;
	}
	.border-bottom {
		padding-bottom: 10px;
    	border-bottom: 1px solid #eaecef;
	}
	.sub-btn {
			z-index: 99;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));
			font-size: 16px;
			font-weight: bold;
			line-height: calc(constant(safe-area-inset-bottom) + 66rpx);
			line-height: calc(env(safe-area-inset-bottom) + 66rpx);
			color:#fff;
			width: 100%;
			height: 66rpx;
			background: #1ABC9C;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 5px 45px 0px #ABB6C1,inset 0px -10px 16px 0px rgba(255, 255, 255, 0.15),inset 0px 3px 5px 0px rgba(255, 255, 255, 0.15),inset 3px 10px 15px 0px rgba(255, 255, 255, 0.35);
		}
</style>